<template>
  <div class="appContainer">
    <!-- 头部 区域 -->
    <mt-header fixed title="谢圆洁的 第一个项目">
		<span slot="left" @click="goback" v-show="flag">
    		<mt-button icon="back">返回</mt-button>
  		</span>
	</mt-header>

    <!-- 中间 区域 -->

    <transition>
		<router-view></router-view>
	</transition>

    <!-- 尾部 区域 -->
    <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item1" to="/tabbar">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item1" to="/member">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item1" to="/shopcar">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">{{$store.getters.carzong}}</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item1" to="/search">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
  </div>
</template>

<script>
export default {
	data(){
		return{
			getCount:0,
			flag:false
		}
	},
	methods: {
		getAppCartGoodsNum(Count){
			this.getCount = Count
			console.log(this.getCount)
		},
		// 返回按钮
		goback(){
			this.$router.go(-1)
			// 但是 首页的 返回需要 隐藏
		},
	},
	created() {
		// if(this.$route.path === '/tabbar'){
		// 	this.flag=false
		// } else{
		// 	this.flag=true
		// }
		this.$route.path==='/tabbar'?this.flag=false:this.flag=true
		// this.flag = this.$route.path ==='/tabbar'?false : true
	},
	watch:{
//因为返回页面 只有首页不显示，其余页面显示，所以需要进行 监听路由的变化，但是页面
// 刚加载时，路由并没有变化，所以不显示返回值,所以 在created中进行 路由的判断
		'$route.path':function(newval){
			if(newval == '/tabbar'){
				this.flag=false
			} else {
				this.flag = true
			}
		}
	}	
}
</script>


<style>
  .appContainer{
		overflow-x: hidden;
    padding-top: 40px;
		padding-bottom: 50px;
  }
	body{
		background-color: #fff;
	}

	/* 设置 中间区域的动画 */

	.v-enter{
		opacity: 0;
		transform: translateX(100%)
	}
	.v-leave-to{
		opacity: 0;
		transform: translateX(-100%)
	}
	.v-enter-active{
		/* 在移动 动画过程中 ，因为 位置原因，两个动画会上下运动，想让他们平齐运动 ，就设置他们绝对定位 */
		/* position: absolute; */
		transition: all 0.6s ease
	}
	.v-leave-active{
		position: absolute;
		transition: all 0.6s ease
	}

	/* 修改 MUI 相冲突的样式 */
.mui-bar-tab .mui-tab-item1.mui-active {
    color: #007aff;
}
.mui-bar-tab .mui-tab-item1 {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
}
.mui-bar-tab .mui-tab-item1 .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
